
<template>
  <el-form
    v-bind="attrs"
    ref="ruleFormRef"
    :rules="rules"
    :model="form"
    class="selector form"
    :label-width="props.labelWidth || '90px'"
  >
    <el-row class="simple-form-item">
      <el-col
        v-for="(item, index) in props.format"
        :key="index"
        class="my-inline"
        :span="item.span"
        :offset="item.offset"
        :style="item.style || (item.offset ? 'paddingLeft: 5px;' : '')"
        :class="'my-inline-' + item.type"
        v-show="item.show ? item.show(info) : true"
      >
        <slot v-if="item.type == 'slot'" :name="item.slotName" :class="item.class"></slot>
        <el-form-item
          :label="item.label"
          class="areaSector2 timeSector"
          :prop="item.prop"
          :label-width="item.labelWidth || '90px'"
          :style="item.style"
        >
          <el-select
            :disabled="item.disabled"
            v-if="item.type == 'select'"
            v-model="form[item.prop]"
            :placeholder="item.placeholder || '请选择' + item.label"
          >
            <el-option
              v-for="(element, index) in item.option"
              :label="element.label"
              :value="element.value"
              :key="index"
            />
          </el-select>
          <el-input
            :disabled="item.disabled"
            v-else-if="item.type == 'input'"
            v-model="form[item.prop]"
            :placeholder="item.placeholder || '请输入' + item.label"
          />
          <el-input
            v-else-if="item.type == 'textarea'"
            :disabled="item.disabled"
            v-model="form[item.prop]"
            type="textarea"
            :rows="item.rows || 3"
            :placeholder="item.placeholder || '请输入' + item.label"
          />
          <el-input-number
            v-else-if="item.type == 'number'"
            :disabled="item.disabled"
            v-model="form[item.prop]"
            :min="item.min || -Infinity"
            :max="item.max || Infinity"
            :controls-position="item.position || 'right'"
          />
          <el-radio-group
            v-else-if="item.type == 'radio'"
            v-model="form[item.prop]"
            class="ml-4"
            :disabled="item.disabled"
          >
            <el-radio
              :value="element.value"
              :size="element.size || 'large'"
              v-for="(element, ind) in item.option"
              :key="ind"
              >{{ element.label }}</el-radio
            >
          </el-radio-group>
          <el-date-picker
            v-else-if="item.type == 'date'"
            v-model="form[item.prop]"
            :type="item.dateType || 'date'"
            :format="item.format"
            :placeholder="item.placeholder || '请选择'"
            :size="size"
            :value-format="item.valueFormat || 'YYYY-MM-DD'"
            style="width: 100%"
          />
          <div v-else-if="item.type == 'date-range'" style="display: flex">
            <el-col :span="11">
              <el-date-picker
                v-model="form[item.prop]"
                type="date"
                placeholder="请选择"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">一</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker
                v-model="form[item.prop2]"
                type="date"
                placeholder="请选择"
                style="width: 100%"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-col>
          </div>
          <div v-else-if="item.type == 'button'" style="display: flex">
            <div
              v-for="(element, ind) in item.btns"
              :key="ind"
              style="display: flex"
            >
              <el-button
                :type="element.type || 'primary'"
                v-show="element.show ? element.show(info) : true"
                :icon="element.icon"
                :class="element.class"
                :style="ind >= 1 ? 'marginLeft:15px' : ''"
                @click="handleEvent(element.event)"
                >{{ element.label }}</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
  <script setup lang="ts">
import { computed, reactive, ref, nextTick, useAttrs } from "vue";

const attrs = useAttrs();
const ruleFormRef = ref(null);
const props = defineProps(["format", "labelWidth"]);
// const format = ref([
//   {
//     label: "部件类型",
//     prop: "componentType",
//     type: "select",
//     option: [{ label: "111", value: "111" }],
//     validate: "required",
//     span: 8,
//     rules: [
//       {
//         required: true,
//         trigger: "change",
//       },
//       {
//         min: 1,
//         max: 2,
//         message: "Length should be 3 to 5",
//         trigger: "change",
//         informType: "warning",
//       },
//     ],
//   },
//   {
//     label: "流域",
//     prop: "basin",
//     type: "select",
//     option: [{ label: "111", value: "111" }],
//     span: 8,
//   },
//   { label: "部件编号", prop: "componentNo", type: "input", span: 8 },
//   {
//     label: "时间",
//     prop: "starTime",
//     prop2: "endTime",
//     type: "date-range",
//     span: 12,
//   },
//   {
//     label: "查询类型",
//     prop: "patrolType",
//     type: "select",
//     option: [{ label: "111", value: "111" }],
//     span: 12,
//   },
//   {
//     label: "描述",
//     prop: "describe",
//     type: "input",
//     span: 8,
//     rules: [
//       {
//         required: true,
//         trigger: "blur",
//       },
//       {
//         min: 1,
//         max: 2,
//         message: "Length should be 3 to 5",
//         trigger: "blur",
//         informType: "warning",
//       },
//     ],
//   },
//   { label: "任务名称", prop: "taskName", type: "input", span: 8 },
//   {
//     label: "紧急程度",
//     prop: "grade",
//     type: "select",
//     option: [{ label: "111", value: "111" }],
//     span: 8,
//   },
//   {
//     label: "",
//     prop: "xxx",
//     type: "button",
//     btns: [
//       { label: "查询", event: "111", type: "success" },
//       { label: "重置", event: "111" },
//     ],
//     span: 8,
//   },
// ]);
const emits = defineEmits(["reset", "submit"]);
const form = ref({});
// 初始化 form 对象，将 format 中的每个 prop 添加到 form 中
const initForrm = () => {
  form.value = props.format.reduce((acc: any, current: any) => {
    if (current.type === "date" && current.prop && current.prop2) {
      acc[current.prop] = current.defaultValue || "";
      acc[current.prop2] = current.defaultValue || "";
    } else {
      acc[current.prop] = current.defaultValue || "";
    }
    return acc;
  }, {});
};
initForrm();
//合并表单规则
const rules = computed(() =>
  props.format.reduce((acc, item) => {
    if (item.rules) acc[item.prop] = item.rules;
    return acc;
  }, {})
);

// 将 data 匹配 form.value中的属性
// const changeForm = (data: Record<string, any>) => {
//   const copyAllProperties = (
//     source: Record<string, any>,
//     target: Record<string, any>
//   ) => {
//     for (const key in target) {
//       if (key in source) {
//         target[key] = source[key];
//       }
//     }
//   };
//   nextTick(() => {
//     copyAllProperties(data, form.value);
//   });
// };
const changeForm = (data: Record<string, any>) => {
  nextTick(() => {
    Object.assign(form.value, data); // 将 data 中的所有属性赋值给 form.value
  });
};
const getFormItem = () => {
  return form.value;
};
const handleEvent = (event: any) => {
  emits(event, form.value);
};
const reset = () => {
  form.value = [];
};
const checkForm = async () => {
  return await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", "成功提交");
    } else {
      console.log("error submit!", "失败提交");
    }
  });
};

defineExpose({ changeForm, getFormItem, reset, checkForm });
</script>
  <style scoped lang="scss">
.form {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.text-center {
  display: flex;
  justify-content: center;
}
</style>